// 课程训练页
.coursedirll {
    width: 100%;
    height: 100%;
    margin: 0 auto;

    .videoBox {
        flex: 1;

        video {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        >div {
            align-self: flex-end;

            p {
                color: #101010;
                font-size: 20px;
            }

            p:first-child {
                font-size: 60px;
            }
        }
    }

    // 控件盒子
    .controlBox {
        // width: 100%;
        height: 90px;
        justify-content: space-around;
        align-items: center;
        position: relative;
        i {
            font-size: 34px;
        }
    }
    //进度条
    .progress_bar{
        width: 0;
        height: 90px;
        background-color:deeppink;
        position:absolute ;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0.5;
    }

    // 遮罩层盒子
    .mask {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(29, 149, 205, .9);
        align-items: center;
        .slogan{
            font-size: 16px;
            color: white;
            line-height: 20px;
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 200px;
        }
        // 控制盒子
        .control{
            width: 100%;
            margin-bottom: 100px;
            justify-content: space-around;
            color: white;
            .start,.end{
                width: 120px;
                height: 120px;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                i{
                    font-size: 30px;
                    margin-bottom: 10px;
                    
                }
            }
            .start{
                background-color: #79F0C2;
            }
            .end{
                background-color: #FF6060;
            }
        }

        .message {
            width: 300px;
            height: 80px;
            border-radius: 10px;
            margin: 0 auto;

            img {
                width: 140px;
                height: 80px;
                border-radius: 15px 0 0 15px;
            }

            >div {
                width: 160px;
                justify-content: space-evenly;
                align-items: center;
                color: white;
                border: 2px solid #eee;
                border-left: 0;
                border-radius: 0 15px 15px 0;
            }
        }
    }
}